<template>
  <div id="register">
    <h1>register</h1>
    <input
      type="text"
      placeholder="请输入账号"
      v-model="username"
      @input="userverify"
    />
    <span v-show="isuser" style="color: #f4a460"
      >账号必须是由数字,字母组成,30个字符以内</span
    >
    <input
      type="text"
      placeholder="请输入昵称"
      v-model="name"
      @input="nameverify"
    />
    <span v-show="isname" style="color: #f4a460"
      >昵称必须是由数字，字母，汉字，下划线组成,30个字符以内</span
    >
    <input
      type="password"
      placeholder="请输入密码"
      v-model="password"
      @input="pwdverify"
    />
    <span v-show="ispwd" style="color: #f4a460">密码必须由6-30个字符组成</span>
    <input
      type="password"
      placeholder="请输入确认密码"
      v-model="surepassword"
      @input="surepwdverify"
    />
    <span v-show="issurepwd" style="color: #f4a460"
      >确认密码必须和密码一致</span
    >
    <button @click="registerclick">注册</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      name: '',
      password: '',
      surepassword: '',
      isuser: false,
      isname: false,
      ispwd: false,
      issurepwd: false,
    };
  },
  methods: {
    userverify() {
      let reg = /^[a-zA-Z0-9]{1,30}$/;
      let isuser = reg.test(this.username);
      this.isuser = !isuser;
    },
    nameverify() {
      let reg = /^[\u4e00-\u9fa5\w]{1,30}$/;
      let isname = reg.test(this.name);
      this.isname = !isname;
    },
    pwdverify() {
      let reg = /^[\w0-9~!@#$%^&*()-+=,.<>/?'";:]{6,30}$/;
      let isuser = reg.test(this.password);
      this.ispwd = !isuser;
    },
    surepwdverify() {
      if (this.surepassword == this.password) {
        this.issurepwd = false;
      } else {
        this.issurepwd = true;
      }
    },
    registerclick() {
      if (
        this.username != '' &&
        this.name != '' &&
        this.password != '' &&
        this.surepassword != '' &&
        !this.isuser &&
        !this.isname &&
        !this.ispwd &&
        !this.issurepwd
      ) {
        let username = this.username;
        let name = this.name;
        let password = this.password;
        this.axios
          .post('/user/register', {
            username,
            name,
            password,
          })
          .then((res) => {
            if (res.data.status == 200) {
              alert(res.data.data);
            }
          })
          .catch((err) => {
            console.log(err);
          });
      } else {
        alert('注册失败');
      }
    },
  },
};
</script>

<style scoped>
#register {
  width: 350px;
  height: 400px;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* background-image: linear-gradient(150deg, #8f3e8f, #8f33cc); */
  background-color: rgb(136, 169, 205);
  color: white;
}
#register input {
  width: 80%;
  margin: 10px;
  border: none;
  border-bottom: 1px solid;
  outline: none;
  color: white;
  background: none;
}
input::placeholder {
  color: white;
}
#register h1 {
  margin-top: 60px;
  margin-bottom: 30px;
}
#register button {
  margin: 20px;
  width: 100px;
  height: 35px;
  outline: none;
  cursor: pointer;
  background: white;
  transition: all 0.3s;
  border: 1px solid black;
}
#register button:hover {
  color: white;
  background-color: #0997f7;
}
span {
  display: inline-block;
  width: 80%;
  font-size: 13px;
  text-align: left;
}
</style>
